<!--  -->
<template>
  <div class="register-container">
    <!-- 头部 -->
    <van-nav-bar title="快速注册" fixed :z-index="100" @click-left="onBack">
      <template #left>
        <van-icon name="arrow-left" size="20" color="#fff" />
      </template>
    </van-nav-bar>
    <div class="content">
      <div class="form-wrapper">
        <div class="user-tel">
          <input
            type="tel"
            placeholder="请输入手机号"
            maxlength="11"
            v-model="userTel"
          />
        </div>
        <div class="user-name">
          <input type="text" placeholder="请输入用户昵称" v-model="userName" />
        </div>
        <div class="user-pwd">
          <input type="password" placeholder="请输入密码" v-model="userPwd" />
        </div>
        <div class="register-btn" @click="registerUser">注册</div>
        <div class="tip">
          注册即同意<a href="http://m.tea7.com/t/agreement">《服务协议》</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon, Toast } from "vant";
import { registerUser } from "@/network/back/api";
export default {
  data() {
    return {
      //用户电话
      userTel: "",
      //用户昵称
      userName: "",
      //用户密码
      userPwd: "",
      rules: {
        userTel: {
          reg: /^1[35789]\d{9}$/,
          toast: "请输入11位合法的手机号",
        },
        userPwd: {
          reg: /^\w{6,16}$/,
          toast: "密码必须为6-16位字母，数字，下划线",
        },
      },
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    //返回上一页
    onBack() {
      this.$router.back();
    },
    validate(field) {
      if (this.rules[field].reg.test(this[field])) {
        return true;
      } else {
        this.$toast(this.rules[field].toast);
        return false;
      }
    },
    //注册用户
    registerUser() {
      if (this.validate("userTel")) {
        if (this.userName.trim().length) {
          if (this.validate("userPwd")) {
            console.log("注册用户");
            this.register();
          }
        } else {
          this.$toast("用户昵称不能为空");
        }
      }
    },
    async register() {
      try {
        let res = await registerUser({
          url: "/registerUser",
          method: "POST",
          data: {
            telephone: this.userTel,
            password: this.userPwd,
            username: this.userName,
          },
        });
        this.$toast(res.message);
        if (res.data) {
          this.$router.push({ name: "PwdLogin" });
        } else {
          setTimeout(() => {
            this.userTel = "";
            this.userName = "";
            this.userPwd = "";
          }, 1000);
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.register-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}
.register-container >>> .van-nav-bar__content {
  background-color: #b64f4a;
}
.register-container >>> .van-nav-bar__title {
  color: #fff;
}
.content {
  flex: 1;
  padding-top: 46px;
}
.form-wrapper {
  padding: 20px;
}
.user-tel,
.user-name,
.user-pwd {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #fff;
  margin-bottom: 20px;
}
.form-wrapper input {
  font-size: 14px;
  padding-left: 10px;
}
.form-wrapper .register-btn {
  height: 44px;
  margin-bottom: 20px;
  color: #fff;
  text-align: center;
  line-height: 44px;
  background-color: #b64f4a;
}
.tip a {
  font-size: 14px;
  color: #b64f4a;
  text-decoration: underline;
}
</style>